<!DOCTYPE html>
<html>
<head>
<title>黄柳淞Page</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!-- fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'><!-- //fonts -->

	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->

<!-- skills -->
<script src="js/pie-chart.js" type="text/javascript"></script>
 <script type="text/javascript">

        $(document).ready(function () {
            $('#demo-pie-1').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-2').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'butt',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-3').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
			
			$('#demo-pie-4').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
        });
    </script>
<!-- skills -->
<script type="text/javascript" src="js/numscroller-1.0.js"></script>

</head>
<body>
<!-- banner -->
<div class="header-top">
	<div class="container">
		<ul>
			<li><a class="scroll" href="#about"><span class="glyphicon glyphicon-file" aria-hidden="true"></span>简历</a></li>
			<li><a class="scroll" href="#emailme"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>我的电子邮件</a></li>
			<li><a href="javascript:window.print()"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>打印简历</a></li>
			<li><a href="#portfolioModal9" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal">
				<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>我的照片</a></li>
		</ul>
	</div>
</div>	
<div class="header">
	<div class="container">
		<div class="col-md-8 header-left">
			<div class="col-sm-5 pro-pic">
				<img class="img-responsive" src="images/pic1.jpg" alt=" "/>
			</div>
			<div class="col-sm-5 pro-text">
				<h1>黄柳淞</h1>
				<p>软件开发工程师</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="col-md-4 header-right ">
			<ul class="list-left">
				<li>Email:</li>
				<li>Website:</li>
				<li>Phone no:</li>
				<li>Address: </li>
			</ul>
			<ul class="list-right">
				<li><a href="mailto:info@example.com">huangliusong1994@gmail.com</a></li>
				<li><a href="mailto:info@example.com">1138127608@qq.com</a></li>
				<li>18172355505</li>
				<li> call me，i can tell you 哦</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //banner -->
<!-- about -->
<div id="about" class="about">
	<div class="container">
		<h3 class="tittle">关于我</h3>
		<p class="abt-para">在这不算美好的时代，过着还算快乐的生活. </p>
	</div>
	<div class="col-md-6 abt-left ">
		<h2>教育</h2>
				<div class="accordion">
							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-1">
									<span>2013 - 2017</span>学士
								<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-1" class="accordion-section-content">
									<h6>荣誉和奖励</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">读书达人|院校级</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">先进个人|院校级</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">三好学生|院校级</a></li>
									</ul>
								</div>
							</div>

							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-2">
									<span>2010 - 2013</span> 贡士
								<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-2" class="accordion-section-content">
									<h6>研讨会</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#"> 语文</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#"> 数学</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#"> 英语</a></li>
									</ul>
								</div>
							</div>

							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-3">
									<span>2007 - 2013</span> 
								<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-3" class="accordion-section-content">
									<h6>举人</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">语文</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">数学</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">英语</a></li>
									</ul>
								</div>
							</div>
							
							
				</div>
				<script>
							jQuery(document).ready(function() {
								function close_accordion_section() {
									jQuery('.accordion .accordion-section-title').removeClass('active');
									jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
								}

								jQuery('.accordion-section-title').click(function(e) {
									// Grab current anchor value
									var currentAttrValue = jQuery(this).attr('href');

									if(jQuery(e.target).is('.active')) {
										close_accordion_section();
									}else {
										close_accordion_section();

										// Add active class to section title
										jQuery(this).addClass('active');
										// Open up the hidden content panel
										jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
									}

									e.preventDefault();
								});
							});
				</script>
	</div>
	<div class="col-md-6 abt-right ">
		<div class="col-sm-4 abt-gd-left text-center">
			<div id="demo-pie-1" class="pie-title-center" data-percent="85"> <span class="pie-value"></span> </div>
			<h4>HTML</h4>
		</div>
		
		<div class="col-sm-4 abt-gd-left text-center">		   
			<div id="demo-pie-3" class="pie-title-center" data-percent="75"> <span class="pie-value"></span> </div>
			<h4>Java Script</h4>
		</div>
		<div class="col-sm-4 abt-gd-left text-center">		   
			<div id="demo-pie-4" class="pie-title-center" data-percent="65"> <span class="pie-value"></span> </div>
			<h4>UI/UX Designer</h4>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>
<!-- about -->
<!-- education -->
<div class="employment">
	<div class="container">
		<h3 class="tittle ">工作经验</h3>
		<p class="abt-para ">自学了安卓编程和http协议，通过fiddler工具和HttpWatch工具抓取数据包搜集浏览器行为数据，模拟网站登录网页，个人独立开发了本学校教务系统安卓客户端，通过客户端可以进行查询学生成绩，课程，选课等信息，可进行四级成绩查询。
github:https://github.com/huangliusong/gxufl2 </p>
		<div class="col-md-6 employ-left">
			<h4>01</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>Web Designer</h5>
			<p>这是一个团队项目，大学生创业项目，和同学五人合作开发一个素材分享网站，分享图片，与世界分享经验，将工作室设计师的作品通过该网站进展示，可供用户进行下载，这个项目中负责编码，测试，搭建框架，使用了MD框架作为UI框架，负责开发环境搭建和服务器配置，使用SVN进行版本控制，提高了团队项目的开发效率保证提交操作的完整性。
开发环境：.net、C#、SQLServer 运行环境：Windows、IIS7
github:https://github.com/huangliusong </p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>UI/UX Designer<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>本人根据知乎日报API接口，开发了知乎日报的安卓客户端，通过gson解析json数据 将数据集采用RecycleView列表容器进行显示,才用卡片式布局,使用了Material Design可以实现查看知乎日报的最新内容。</p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>02</h4>
		</div>
		<div class="col-md-6 employ-left ">
			<h4>03</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>HTML Developer</h5>
			<p>通过Postman插件手动post模拟获取API数据，然后根据科大讯飞语音平台系统SDK与图灵机器人知识库，进行两项功能整合,实现了android平台下的人机对话聊天功能。 </p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>android<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>自学了安卓编程和http协议，通过fiddler工具和HttpWatch工具抓取数据包搜集浏览器行为数据，模拟网站登录网页，个人独立开发了本学校教务系统安卓客户端，通过客户端可以进行查询学生成绩，课程，选课等信息，可进行四级成绩查询。 github:https://github.com/huangliusong/gxufl2 </p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>04</h4>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- education -->
<!-- num scroller -->
<div class="num-scroller">
	<div class="container">
		<h3 class="tittle ">Milestones Achieved</h3>
		<div class="col-md-3 capabil-grid text-center">
			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='1000' data-delay='.5' data-increment="100">1000</div>
			<p>Projects Done</p>		
		</div>
		<div class="col-md-3 capabil-grid text-center">
					
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='1700' data-delay='.5' data-increment="5">1700</div>
			<p>Testing</p>	
		</div>
		<div class="col-md-3 capabil-grid text-center" >
			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='9000' data-delay='.5' data-increment="100">9000</div>				
			<p>Clients</p>
		</div>
		<div class="col-md-3 capabil-grid text-center">			
			<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='2500' data-delay='.5' data-increment="1">2500</div>
			<p>Likes</p>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //num scroller -->
<!-- portfolio -->
<div class="portfolio">
	<div class="container">
		<h3 class="tittle ">Portfolio</h3>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
									$(document).ready(function () {
										$('#horizontalTab').easyResponsiveTabs({
											type: 'default', //Types: default, vertical, accordion           
											width: 'auto', //auto or any width like 600px
											fit: true   // 100% fit in a container
										});
									});
									
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>All</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Web Design</span></li> 
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Graphic Design</span></li> 
						</ul>				  	 
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- //portfolio -->
<!-- more skills -->
<div class="more">
	<div class="container">
		<h3 class="tittle ">Skills</h3>
		<div class="col-md-6 skill-left ">
			<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 30%">WEB DESIGNER
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning " style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success1" style="width: 30%">JAVA SCRIPT
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning1" style="width: 20%">
					<span class="sr-only"></span>
				  </div>
				  <p>50%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success3" style="width: 30%">CSS
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning3 " style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success2" style="width: 30%">HTML
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning2" style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			
			<div class="progress no-marg">
				  <div class="progress-bar progress-bar-success4" style="width: 30%">GRAPHIC DESIGN
					<span class="sr-only">35% Complete (success)</span>
				  </div>
				  <div class="progress-bar progress-bar-warning4" style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
		</div>
		<div class="col-md-6 skill-right ">
			<div class="scrollbar scrollbar1">
				<div class="more-gds">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>Clean Design</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error 
						sit voluptatem accusantium doloremque laudantium,
						totam rem .</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
						<h4>Mobile Applications</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error 
						sit voluptatem accusantium doloremque laudantium,
						totam rem .</p>
					</div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>Support</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error 
						sit voluptatem accusantium doloremque laudantium,
						totam rem .</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
						<h4>Marketing</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error 
						sit voluptatem accusantium doloremque laudantium,
						totam rem .</p>
					</div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- more skills -->
<!-- contact -->
<div id="emailme" class="contact">
	<div class="container">
		<h3 class="tittle">Contact</h3>
		<div class="col-md-6 contact-left ">
			<div class="horizontal-tab">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab1" data-toggle="tab" aria-expanded="false">Contact me</a></li>
					<li class=""><a href="#tab2" data-toggle="tab" aria-expanded="false">Hire me</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active in" id="tab1">
						<div class="contact-form">
							<ul>
								<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>Newyork City.</span></li>
								<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">info@example.com</a></li>
								<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
							</ul>
							<form>
								<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
								<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
								<input type="submit" value="Submit" >
							</form>
						</div>
					 
					</div>
					<div class="tab-pane" id="tab2">
					  <div class="contact-form">
							<form>
								<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
								<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Description...</textarea>
								<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
									<div class="fileUpload btn btn-primary">
										<span>Upload</span>
										<input id="uploadBtn" type="file" class="upload" />
									</div>
								<input type="submit" value="Send Request" >
							</form>
							<script>
								document.getElementById("uploadBtn").onchange = function () {
									document.getElementById("uploadFile").value = this.value;
								};
							</script>
						</div>
					</div>
					
				</div>
            </div>
		</div>
		<div class="clearfix"></div>
		<p class="copy-right">Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
</div>
<!-- //contact -->
<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic4.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic9.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic5.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic6.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic10.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic11.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic13.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic14.jpg" class="img-responsive img-centered" alt="">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <img src="images/pic1.jpg" class="img-responsive img-centered" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
	<!--scrolling js-->
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/scripts.js"></script>
	<!--//scrolling js-->
	<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->

</body>
</html>
